import dom from '@/utils/dom.js'

const ctx = 'rs_drag_el_dialog_context'
export default {
    bind(el, binding, vnode) {
        
        const dialogHeaderEl = el.querySelector('.el-dialog__header')
        const dragDom = el.querySelector('.el-dialog')
        const headBtn = dialogHeaderEl.querySelector('.el-dialog__headerbtn');
        if( headBtn ){
            dom.on(headBtn,'mousedown',(e)=>{
                e.stopPropagation();
            })
        }

        const dragMousedown = function(e){

            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - dialogHeaderEl.offsetLeft
            const disY = e.clientY - dialogHeaderEl.offsetTop

            const dragDomWidth = dragDom.offsetWidth
            const dragDomHeight = dragDom.offsetHeight

            const screenWidth = document.body.clientWidth
            const screenHeight = document.body.clientHeight
 
            const minDragDomLeft = dragDom.offsetLeft
            const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

            const minDragDomTop = dragDom.offsetTop
            const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight

            // 获取到的值带px 正则匹配替换
            let styL = dom.getStyle(dragDom, 'left')
            let styT = dom.getStyle(dragDom, 'top')

            if (styL.includes('%')) {
                styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
                styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
            } else {
                styL = +styL.replace(/\px/g, '')
                styT = +styT.replace(/\px/g, '')
            }

            function dragMousemove(e){
                // 通过事件委托，计算移动的距离
                let left = e.clientX - disX
                let top = e.clientY - disY

                // 边界处理
                if (-(left) > minDragDomLeft) {
                    left = -minDragDomLeft
                } else if (left > maxDragDomLeft) {
                    left = maxDragDomLeft
                }

                if (-(top) > minDragDomTop) {
                    top = -minDragDomTop
                } else if (top > maxDragDomTop) {
                    top = maxDragDomTop
                }

                // 移动当前元素
                dom.setStyle(dragDom,{
                    left:`${left + styL}px`,
                    top:`${top + styT}px`
                })

                // emit onDrag event
                vnode.child.$emit('dragDialog')
            }

            function dragMouseup(e){
                dom.off(document,'mousemove',dragMousemove);
                dom.off(document,'mouseup',dragMouseup);
            }

            dom.on(document,'mousemove',dragMousemove);
            dom.on(document,'mouseup',dragMouseup);
        }
        dom.on(dialogHeaderEl,'mousedown',dragMousedown);
        el[ctx] = {
            fn:dragMousedown,
            headBtn,
            dialogHeaderEl
        }
    },
    unbind(el, binding, vnode){
        console.log('unbind')
        const obj = el[ctx];
        dom.off(obj.dialogHeaderEl,'mousedown',obj.fn);
        if(obj.headBtn){
            dom.off(obj.headBtn,'mousedown',null);
        }
        delete el[ctx];
    }
}
